@use "../../../colors";
@use "../../../frameless";

/* unusually for a modal, the join flow modal cares about the screen around it
being clickable, because of the standalone join view. */
.mod-join {
    width: 27.4375rem;

    @media #{frameless.$small} {
        width: auto;
    }
}

/* enable vertical scrolling when modal showing, if page is short */
.modal-overlay {
    @media #{frameless.$small-height}, #{frameless.$medium-height} {
        overflow: auto;
    }
}

.modal-content {
    @media #{frameless.$small}, #{frameless.$small-height} {
        height: unset;
    }
}

/* lower the modal slightly to accomodate Scratch logo above it */
.modal-sizes {
    @media #{frameless.$small}, #{frameless.$small-height}, #{frameless.$medium}, #{frameless.$medium-height} {
        margin: 3.5rem auto;
    }
}
